<template>
  <view class="reader">
    <Loading v-if="loading" />
    <template v-else>
      <view
        :class="[
          'reader__container',
          {
            noscroll: noScroll,
            iphonex: isIphoneX,
            column: modeName === 'page',
          },
        ]"
        :style="{ background: themeConfig.pageBackground }"
      >
        <!-- 书籍内容 -->
        <template v-if="modeName === 'scroll'">
          <!-- 上下翻页 -->
          <view
            class="reader__head-info"
            :style="{
              fontSize: `${fontSize * 2 + 6}rpx`,
              color: themeConfig.basicTextColor,
            }"
          >
            {{ chapterInfo }}
          </view>
          <view class="reader__scroll-wrap" @click="handleClickPage">
            <text
              selectable
              space="emsp"
              class="reader__content"
              :style="{
                fontSize: `${fontSize * 2}rpx`,
                color: themeConfig.basicTextColor,
              }"
            >
              {{ content }}
            </text>
          </view>
          <!-- 底部操作按钮 -->
          <BottomBtns
            @click-pre-chapter="loadPreChapter"
            @click-next-chapter="loadNextChapter"
            @click-open-mulu="openMulu"
          />
        </template>
        <template v-if="modeName === 'page'">
          <view class="reader__wrap" @click="handleClickPage">
            <view
              class="reader__inner"
              :style="{
                left: leftValue,
                'column-width': `${windowWidth}px`,
                'column-gap': '0px',
                transition: useTransition ? 'all 0.3s' : 'none',
              }"
            >
              <text
                class="reader__head-info"
                :style="{
                  fontSize: `${fontSize * 2 + 6}rpx`,
                  color: themeConfig.basicTextColor,
                }"
              >
                {{ chapterInfo }}
              </text>
              <text
                selectable
                space="emsp"
                class="reader__content"
                :style="{
                  fontSize: `${fontSize * 2}rpx`,
                  color: themeConfig.basicTextColor,
                }"
              >
                <text
                  v-for="(item, index) in contentArr"
                  :key="index"
                  class="reader__param"
                >
                  {{ item }}
                </text>
              </text>
            </view>
          </view>
        </template>
        <!-- #ifdef H5 -->
        <!-- 顶部标题 -->
        <Title :extra-text="progressStr" />
        <!-- 阅读设置上 -->
        <UpSetting @open-share="openShare" />
        <!-- #endif -->
        <!-- 阅读设置下 -->
        <DownSetting :canRead="canRead" @load-chapter="loadChapter" />
        <!-- 左侧按钮 -->
        <LeftBtns @open-share="openShare" />
        <!-- 分享 -->
        <Share
          :show.sync="showShare"
          :options="['wechat', 'poster', 'copy']"
          :copy-text="copyText"
          :poster-url="posterUrl"
          :background-color="themeConfig.menuBackground"
          :split-line-color="themeConfig.splitLineColor"
          :text-color="themeConfig.menuTextColor"
        />
        <!-- 不能阅读蒙层 -->
        <CanNotRead
          :canRead.sync="canRead"
          :dark="theme === 'dark'"
          @cancel="loadNewestChapter"
          @share="openShare"
        />
      </view>
    </template>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { getBookShareUrl, setPageTitle } from '@/utils';
import debug from '@/utils/log';
import { get } from '@/utils/index';
import Share from '@/components/Share';
import Loading from './components/Loading';
import UpSetting from './components/UpSetting';
import DownSetting from './components/DownSetting';
import BottomBtns from './components/BottomBtns';
import LeftBtns from './components/LeftBtns';
import CanNotRead from './components/CanNotRead';
import Title from './components/Title';
import { platformName } from '../../config';

export default {
  components: {
    Loading,
    UpSetting,
    DownSetting,
    BottomBtns,
    LeftBtns,
    CanNotRead,
    Title,
    Share,
  },

  data() {
    return {
      loading: false,
      failed: false,
      chapterInfo: '',
      content: '',
      canRead: true,
      showShare: false,
      canRead: true,
      columnNum: 1, // 翻页模式下的当前页数
      windowWidth: 0,
      windowHeight: 0,
      useTransition: true, // 是否使用滑动的transition动画，在切换下一章的时候应该关闭
    };
  },

  computed: {
    ...mapGetters([
      'hasLogin',
      'themeConfig',
      'isIphoneX',
      'shareCode',
      'settings',
    ]),
    ...mapState({
      bookid: (state) => state.reader.bookid,
      name: (state) => state.reader.name,
      maxChapterNum: (state) => state.reader.maxChapterNum,
      chapterNum: (state) => state.reader.chapterNum,
      theme: (state) => state.reader.theme,
      fontSize: (state) => state.reader.fontSize,
      isAutoBuy: (state) => state.reader.isAutoBuy,
      showMenu: (state) => state.reader.showMenu,
      noScroll: (state) => state.reader.noScroll,
      updateStatus: (state) => state.reader.updateStatus,
      modeName: (state) => state.reader.modeName,
    }),

    copyText() {
      return `我正在阅读《${this.name}》的第${
        this.chapterNum
      }章，点击下面链接来和我一起阅读吧~\n${getBookShareUrl(
        this.bookid,
        this.shareCode
      )}`;
    },

    posterUrl() {
      return `/api/front/poster/book?id=${this.bookid}`;
    },

    // 翻页模式下的左偏移值
    leftValue() {
      return `${-Math.max(this.columnNum - 1, 0) * this.windowWidth}px`;
    },

    contentArr() {
      return this.content.split(/[\t\n\s]+/);
    },

    progressStr() {
      return this.modeName === 'page' && this.other
        ? `${this.columnNum}/${this.other.maxPageNum}`
        : '';
    },
  },

  watch: {
    chapterNum(newValue, oldValue) {
      if (newValue !== oldValue) {
        // this.fetchChapter({
        //   num: newValue,
        //   skipPreload: true,
        //   autoScrollToTop: true,
        //   hideLoading: false,
        //   isPreLoad: false,
        // });
      }
    },

    modeName(newValue, oldValue) {
      debug('reader', '阅读模式修改', { newValue, oldValue });
      if (newValue === 'page') {
        uni.showToast({
          title: '实验性功能，可能存在 bug',
          icon: 'none',
          duration: 2000,
        });
        this.countMaxColumn();
      }
    },
  },

  onLoad(options) {
    // 声明一些运行时需要用到的变量
    this.fetchLock = false;
    this.$store.commit('updateReader', { bookid: options.book || '' });
    this.other = {
      hasRssTheBook: 0,
      preload: {
        loaded: false,
        data: '',
      },
      scrollTopTimer: null,
      scrollTopValue: 0, // 滚动模式下的滚动高度
      readTime: 0,
      preChapterNum: 1,
      curChapterNum: 1,
      maxPageNum: 1, // 翻页模式下最大翻页数
    };

    // 获取章节数据
    this.fetchChapter({
      chapter: options.chapter,
      skipPreload: true,
      autoScrollToTop: false,
      preOrNext: 'next',
      showLoadFailPage: true,
    });

    // 根据主题设置导航颜色
    uni.setNavigationBarColor({
      frontColor: this.theme === 'dark' ? '#ffffff' : '#000000',
      backgroundColor: this.themeConfig.menuBackground,
      animation: {
        duration: 300,
        timingFunc: 'easeIn',
      },
    });

    if (platformName !== 'web') {
      // 设置页面背景，H5没有实现这个方法
      uni.setBackgroundColor({
        backgroundColor: this.themeConfig.pageBackground,
        backgroundColorTop: this.themeConfig.pageBackground,
        backgroundColorBottom: this.themeConfig.pageBackground,
      });
    }

    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    this.windowWidth = windowWidth;
    this.windowHeight = windowHeight;
  },

  // 跳出页面执行函数，执行更新阅读状态的操作
  onHide: function () {
    // 存储阅读器设置
    this.$store.commit('saveReaderSetting');
    if (this.hasLogin) this.updateRead();
    clearInterval(this.other.scrollTopTimer);
  },

  onUnload: function () {
    this.$store.commit('saveReaderSetting');
    if (this.hasLogin) this.updateRead();
    this.$store.commit('resetReader');
    clearInterval(this.other.scrollTopTimer);
  },

  onShow: function (options) {
    // 登录完成刷新当前页面
    if (this.hasLogin && this.needLogin) {
      this.fetchLock = false;
      this.reFetchChapter();
      this.needLogin = false;
    }
    // 每过2s记录下阅读状态
    this.other.scrollTopTimer = setInterval(() => {
      let query = wx.createSelectorQuery();
      query.selectViewport().scrollOffset();
      query.exec((res) => {
        if (res[0].scrollTop !== this.other.scrollTopValue) {
          this.other.readTime += 1000;
        }
        this.other.scrollTopValue = res[0].scrollTop;
      });
    }, 1000);
  },

  onShareAppMessage(res) {
    return {
      title: `推荐给你一本好书-《${this.name}》`,
      path: `/pages/bookdetail/index?share_code=${this.shareCode}`,
    };
  },

  onReachBottom: function () {
    // 滑动阅读的时候预加载下一章
    const nextChapterNum = this.chapterNum + 1;
    if (nextChapterNum <= this.maxChapterNum) {
      this.fetchChapter({
        num: nextChapterNum,
        skipPreload: true,
        autoScrollToTop: false,
        hideLoading: true,
        isPreLoad: true,
        preOrNext: 'next',
        showLoadFailTips: false,
      });
    } else {
      uni.showToast({
        title: '当前已经是最后一章了',
        icon: 'none',
        duration: 2000,
      });
    }
  },

  methods: {
    /**
     * 加载章节内容
     * @param {Number} options.num 章节序号
     * @param {String} options.chapter 章节ID
     * @param {Boolean} options.skipPreload 是否跳过预加载
     * @param {Boolean} options.autoScrollToTop 是否自动滚动到底部
     * @param {Boolean} options.hideLoading 是否隐藏加载动画
     * @param {Boolean} options.isPreLoad 是否是预加载
     * @param {Boolean} options.gotoLastPage 是否翻到最后一页
     * @param {Boolean} options.showLoadFailTips  加载失败是否展示提示弹窗
     */
    fetchChapter(options) {
      const newOptions = {
        num: 0,
        chapter: '',
        skipPreload: true,
        autoScrollToTop: true,
        hideLoading: false,
        isPreLoad: false,
        gotoLastPage: false,
        preOrNext: 'next',
        showLoadFailTips: true,
        ...options,
      };

      // 记住上一章节的序号
      this.other.preChapterNum = this.chapterNum;
      this.other.curChapterNum = newOptions.num;

      // 是否加载预加载的内容
      if (
        !newOptions.skipPreload &&
        newOptions.num &&
        this.other.preload.loaded
      ) {
        const res = this.other.preload.data;
        if (res.ok && res.data) {
          const { data: bookInfo } = res;
          this.chapterInfo = `第${bookInfo.num}章 ${bookInfo.name}`;
          this.content = ' ' + bookInfo.content.replace(/[\r\n]+\s*/g, '\n\n ');
          this.canRead = res.canRead;
          // 更新运行时变量
          this.$store.commit('updateReader', {
            name: res.bookname,
            chapterInfo: this.chapterInfo,
            chapterNum: bookInfo.num,
            maxChapterNum: res.newest,
            updateStatus: res.update_status,
            goodPrice: res.goodPrice,
            userAmount: res.userAmount,
            noScroll: !res.canRead,
          });
          this.$store.commit('updateBaseInfo', { member: res.member });
          this.other = {
            ...this.other,
            hasRssTheBook: res.rss,
            preload: {
              loaded: false,
              data: '',
            },
          };
          // 设置页面标题
          setPageTitle(bookInfo.name);
          if (this.modeName === 'scroll') {
            // 滑动页面到指定位置
            setTimeout(() => {
              if (newOptions.autoScrollToTop) {
                wx.pageScrollTo({ scrollTop: 0, duration: 0 });
              } else {
                wx.pageScrollTo({
                  scrollTop: parseInt(res.scroll),
                  duration: 0,
                });
              }
            }, 100);
          } else if (this.modeName === 'page') {
            this.countMaxColumn(newOptions.gotoLastPage);
          }
        } else {
          // 预加载过程中不弹出章节加载错误提示
          if (newOptions.showLoadFailTips) {
            this.showLoadFailPage({
              type: 'common',
              isPre: newOptions.preOrNext === 'pre',
            });
          }
        }
        return false;
      }

      // 没有预加载的情况下实时请求后端数据
      if (!newOptions.hideLoading) this.loading = true;
      if (!this.hasLogin) this.needLogin = true;
      this.$http({
        method: 'GET',
        url: '/api/front/chapter/detail',
        data: {
          bookid: this.bookid,
          chapter_id: newOptions.chapter,
          chapter_num: newOptions.num,
        },
        needAuth: true,
        skipToast: true,
      })
        .then((res) => {
          if (res.ok && res.data) {
            if (newOptions.isPreLoad) {
              // 预加载存储加载得来的数据
              this.other.preload = { loaded: true, data: res };
            } else {
              // 正常展示操作
              const { data: bookInfo } = res;
              if (!newOptions.hideLoading) this.loading = false;
              this.chapterInfo = `第${bookInfo.num}章 ${bookInfo.name}`;
              this.content =
                ' ' + bookInfo.content.replace(/[\r\n]+\s*/g, '\n\n ');
              this.canRead = res.canRead;
              // 更新运行时变量
              this.$store.commit('updateReader', {
                name: res.bookname,
                chapterInfo: this.chapterInfo,
                chapterNum: bookInfo.num,
                maxChapterNum: res.newest,
                updateStatus: res.update_status,
                goodPrice: res.goodPrice,
                userAmount: res.userAmount,
                noScroll: !res.canRead,
              });
              this.$store.commit('updateBaseInfo', { member: res.member });
              this.other = {
                ...this.other,
                hasRssTheBook: res.rss,
                preload: {
                  loaded: false,
                  data: '',
                },
                scrollTopValue: parseInt(res.scroll),
              };
              // 设置页面标题
              setPageTitle(bookInfo.name);
              if (this.modeName === 'scroll') {
                // 滑动页面到指定位置
                setTimeout(() => {
                  if (newOptions.autoScrollToTop) {
                    wx.pageScrollTo({ scrollTop: 0, duration: 0 });
                  } else {
                    wx.pageScrollTo({
                      scrollTop: parseInt(res.scroll),
                      duration: 0,
                    });
                  }
                }, 100);
              } else if (this.modeName === 'page') {
                this.countMaxColumn(newOptions.gotoLastPage);
              }
            }
          } else {
            if (newOptions.showLoadFailTips) {
              this.showLoadFailPage({
                type: 'common',
                isPre: newOptions.preOrNext === 'pre',
              });
            }
          }
        })
        .catch(() => {
          if (newOptions.showLoadFailTips) {
            this.showLoadFailPage({
              type: 'common',
              isPre: newOptions.preOrNext === 'pre',
            });
          }
        });
    },

    /**
     * 加载指定章节
     * @param {string} preOrNext 上一章或者下一章
     * @param {number} num 指定章节数
     */
    loadChapter({ preOrNext = '', num = 0, skipPreload = true }) {
      if (preOrNext === 'pre') {
        if (this.chapterNum - 1 <= 0) {
          uni.showToast({ title: '当前已经是第一章了', icon: 'none' });
          return false;
        }
        // 重置加载信息
        if (skipPreload) this.other.preload = { loaded: false, data: '' };
        // 获取并展示上一章节内容
        this.fetchChapter({
          num: this.chapterNum - 1,
          skipPreload,
          autoScrollToTop: true,
          gotoLastPage: true,
          preOrNext: 'pre',
          showLoadFailTips: true,
        });
      } else if (preOrNext === 'next') {
        if (this.chapterNum + 1 > this.maxChapterNum) {
          // 判断是否是连载书籍，如果是则提示订阅书籍
          if (this.updateStatus === '连载中') {
            if (!this.other.hasRssTheBook) {
              uni.showModal({
                title: '温馨提示',
                content:
                  '没有更多了！连载书籍敬请等待更新。你可以点击订阅本书，有更新会及时通知您！如果长时间不更新可以联系客服。',
                confirmText: '订阅本书',
                confirmColor: '#1AAD19',
                success: (res) => {
                  if (res.confirm) {
                    this.rssThisBook();
                  }
                },
              });
            } else {
              uni.showToast({
                title: '当前已经是最后一章了',
                icon: 'none',
                duration: 2000,
              });
            }
          } else {
            uni.showModal({
              title: '温馨提示',
              content: '您已经读完全书，去首页发现更多好书吧~',
              confirmText: '前往首页',
              confirmColor: '#1AAD19',
              success(res) {
                if (res.confirm) {
                  wx.switchTab({
                    url: '/pages/index/index',
                  });
                }
              },
            });
          }
          return false;
        }

        // 重置加载信息
        if (skipPreload) this.other.preload = { loaded: false, data: '' };
        // 请求并展示下一章
        this.fetchChapter({
          num: this.chapterNum + 1,
          skipPreload,
          autoScrollToTop: true,
          preOrNext: 'next',
          showLoadFailTips: true,
        });
      } else if (num && num > 0) {
        // 重置加载信息
        if (skipPreload) this.other.preload = { loaded: false, data: '' };
        this.fetchChapter({
          num,
          skipPreload,
          autoScrollToTop: true,
          preOrNext: num >= this.chapterNum ? 'next' : 'pre',
          showLoadFailTips: true,
        });
      }
      // 如果菜单为显示状态则关闭菜单
      if (this.showMenu) {
        this.$store.commit('updateReader', {
          showMenu: false,
          menuName: 'default',
        });
      }
      // 页面滚动到顶部
      // uni.pageScrollTo({ scrollTop: 0, duration: 0 });
    },

    // 加载上一章节
    loadPreChapter() {
      this.loadChapter({ preOrNext: 'pre', skipPreload: true });
    },

    // 加载下一章节
    loadNextChapter() {
      this.loadChapter({ preOrNext: 'next', skipPreload: false });
    },

    // 加载最近可阅读章节
    loadNewestChapter() {
      this.fetchChapter({
        num: this.other.preChapterNum,
        skipPreload: true,
        autoScrollToTop: true,
        preOrNext: this.other.preChapterNum >= this.chapterNum ? 'next' : 'pre',
        showLoadFailTips: true,
      });
    },

    // 展示章节加载错误页面
    showLoadFailPage({ type = 'common', isPre = false }) {
      debug('reader', '章节加载错误', '');
      this.loading = false;
      if (type === 'common') {
        uni.showModal({
          title: '温馨提示',
          content: `第 ${this.other.curChapterNum} 章加载失败，服务器可能响应不过来，请稍后重试`,
          confirmText: '重试',
          cancelText: isPre ? '看上一章' : '看下一章',
          confirmColor: '#1AAD19',
          success: (res) => {
            if (res.confirm) {
              this.reFetchChapter(this.other.curChapterNum);
            } else {
              this.loadChapter({
                skipPreload: true,
                num: isPre
                  ? this.other.curChapterNum - 1
                  : this.other.curChapterNum + 1,
              });
            }
          },
        });
      }
    },

    // 重新获取当前章节
    reFetchChapter(num) {
      if (!this.fetchLock) {
        this.fetchLock = true;
        // 重新获取当前章节
        this.fetchChapter({
          num: num || this.chapterNum,
          skipPreload: true,
          autoScrollToTop: true,
          preOrNext: 'next',
          showLoadFailTips: true,
        });
        setTimeout(() => {
          this.fetchLock = false;
        }, 2000);
      } else {
        uni.showToast({ title: '操作太频繁，请稍后再试', icon: 'none' });
      }
    },

    // 订阅当前书籍
    rssThisBook() {
      const templateConfig = get(this.settings, 'template_ids', {});
      const templateIds = Object.values(templateConfig) || [];
      wx.requestSubscribeMessage({
        tmplIds: templateIds,
        success: (res) => {
          this.$http({
            method: 'POST',
            url: '/api/front/booklist/rss',
            data: { bookid: this.bookid, rss: 1 },
            skipToast: false,
            needAuth: true,
            errorText: '订阅书籍失败',
          }).then((res) => {
            if (res.ok) {
              this.$store.commit('showSuccessTips', '订阅书籍成功');
              this.other.hasRssTheBook = 1;
              const hasRssBookArr = wx.getStorageSync('hasRssBookArr') || [];
              if (hasRssBookArr.indexOf(this.bookid) < 0) {
                hasRssBookArr.push(this.other.bookid);
                wx.setStorageSync('hasRssBookArr', hasRssBookArr);
              }
            }
          });
        },
        fail: (err) => {
          uni.showToast({ title: '订阅书籍失败', icon: 'none' });
        },
      });
    },

    // 控制setting的显示和隐藏
    handleClickPage(event) {
      // 如果是滑动模式打开菜单
      if (this.modeName === 'scroll') {
        this.$store.commit('updateReader', {
          showMenu: !this.showMenu,
          menuName: 'default',
        });
      } else if (this.modeName === 'page') {
        const xPos = event.detail.x;
        const pos1 = this.windowWidth * 0.35;
        const pos2 = this.windowWidth * 0.65;
        if (xPos >= 0 && xPos < pos1) {
          // 如果当前打开了菜单则关闭
          if (this.showMenu) {
            this.$store.commit('updateReader', {
              showMenu: false,
              menuName: 'default',
            });
          }
          // 点击屏幕左边部分翻到上一页
          const preColumnNum = Math.max(this.columnNum - 1, 0);
          if (preColumnNum === 0) {
            // 加载上一章
            this.useTransition = false;
            this.loadChapter({ preOrNext: 'pre', skipPreload: false });
          } else {
            // 预加载
            if (this.columnNum - 1 === 1) {
              this.fetchChapter({
                num: Math.max(this.chapterNum - 1, 0),
                skipPreload: true,
                autoScrollToTop: false,
                hideLoading: true,
                isPreLoad: true,
                preOrNext: 'next',
                showLoadFailTips: false,
              });
            }
            // 正常翻页
            this.useTransition = true;
            this.columnNum = preColumnNum;
          }
        } else if (xPos >= pos1 && xPos <= pos2) {
          // 点击屏幕中间部分弹出菜单
          this.$store.commit('updateReader', {
            showMenu: !this.showMenu,
            menuName: 'default',
          });
        } else {
          // 如果当前打开了菜单则关闭
          if (this.showMenu) {
            this.$store.commit('updateReader', {
              showMenu: false,
              menuName: 'default',
            });
          }
          // 点击屏幕右边边部分翻到下一页
          const nextColumnNum = Math.min(
            this.columnNum + 1,
            this.other.maxPageNum + 1
          );
          if (nextColumnNum > this.other.maxPageNum) {
            // 加载下一章
            this.useTransition = false;
            this.loadChapter({ preOrNext: 'next', skipPreload: false });
            this.columnNum = 1;
          } else {
            // 预加载
            if (nextColumnNum === this.other.maxPageNum - 1) {
              this.fetchChapter({
                num: Math.min(this.chapterNum + 1, this.maxChapterNum),
                skipPreload: true,
                autoScrollToTop: false,
                hideLoading: true,
                isPreLoad: true,
                preOrNext: 'next',
                showLoadFailTips: false,
              });
            }
            // 正常翻页
            this.useTransition = true;
            this.columnNum = nextColumnNum;
          }
        }
      }
    },

    // 打开目录
    openMulu() {
      this.$store.commit('updateReader', {
        showMenu: true,
        menuName: 'mulu',
      });
    },

    // 更新阅读状态
    updateRead() {
      this.$http({
        method: 'PUT',
        url: '/api/front/booklist/update',
        data: {
          bookid: this.bookid,
          chapter_num: this.chapterNum,
          chapter_page_index: 0,
          chapter_page_top: this.other.scrollTopValue,
          read_time: this.other.readTime,
        },
        needAuth: true,
        skipToast: false,
        errorText: '更新阅读记录失败',
      });
    },

    // 打开分享弹窗
    openShare() {
      if (this.showMenu) {
        this.$store.commit('updateReader', {
          showMenu: false,
          menuName: 'default',
        });
      }
      this.showShare = true;
    },

    // 计算最大分页数
    countMaxColumn(gotoLastPage = false) {
      // 重置当前翻页数
      this.columnNum = 1;
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('.reader__content')
          .boundingClientRect((res) => {
            const { width = 0, height = 0 } = res;
            if (height <= this.windowHeight) {
              this.other.maxPageNum = Math.round(width / this.windowWidth) || 1;
            } else if (width <= this.windowWidth) {
              this.other.maxPageNum =
                Math.round(height / (this.windowHeight - 50)) || 1;
            }
            debug('reader', '计算最大分页数', {
              width: res.width,
              height: res.height,
              windowWidth: this.windowWidth,
              windowHeight: this.windowHeight,
              maxPageNum: this.other.maxPageNum,
            });
            if (gotoLastPage) this.columnNum = this.other.maxPageNum;
          })
          .exec();
      }, 100);
    },
  },
};
</script>

<style lang="scss">
.reader {
  &.overflow {
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
  }

  &__container {
    padding: 70rpx 30rpx 30rpx 30rpx;
    color: #272727;
    background: #f7f7f7;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;

    &.column {
      padding-bottom: 30rpx !important;
      padding-left: 0;
      padding-right: 0;

      .reader__head-info {
        padding: 0 32rpx;
      }

      .reader__content {
        display: flex;
        flex-flow: column nowrap;
      }
    }

    &.noscroll {
      height: 100vh;
      overflow: hidden;
    }
  }

  &__scroll-wrap {
    flex: 1;
  }

  &__head-info {
    font-size: 40rpx;
    margin-bottom: 40rpx;
    font-weight: bold;
  }

  &__content {
    font-size: 32rpx;
    line-height: 1.7em;
    text-indent: 50rpx;
    user-select: none;
    display: inline-block;
    flex: 1;
  }

  &__wrap {
    overflow: hidden;
    height: calc(100vh - 100rpx);
  }

  &__inner {
    position: relative;
    left: 0;
    height: 100%;
    position: relative;
    height: 100%;
    // transition: all 0.3s;

    &-block {
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 30rpx;
      height: 100%;
    }
  }

  &__param {
    display: block;
    margin-top: 40rpx;
    padding: 0 32rpx;
    text-align: justify;
    font-size: inherit;
    line-height: 1.7em;
    text-indent: 30rpx;
    user-select: none;
  }
}

/* #ifdef H5 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .reader__container {
    padding-bottom: 98rpx;
    padding-bottom: calc(15px + constant(safe-area-inset-bottom));
    padding-bottom: env(15px + safe-area-inset-bottom);
  }
}
/* #endif */

/* #ifndef H5 */
.reader {
  &__container {
    padding-top: 30rpx;

    &.iphonex {
      padding-bottom: 98rpx;
    }
  }
}
/* #endif */
</style>
